<template>
    <div class="fmovie">
        <div class="ftop">
            <div class="ftitle"> 最受期待</div>
            <div class="swiper-container">
                <div class="swiper-wrapper" >
                <div class="swiper-slide" v-for="(item,index) in fmovieList" :key='item.id'>
                    <img :src="fmovieimgList[index]" alt="">
                    <div class="exwish">{{item.wish}}人想看</div>
                    <div class="exname">{{item.nm}}</div>
                    <div class="extime">{{item.comingTitle}}</div>
                    <div class="wantwatch">
                        <img src="" alt="">
                    </div>
                </div>
            </div>
           </div>

        </div>
        <div class="fmovielist">
                <van-card v-for="item in fmovieList2" :key="item.id" @click="goDetail(item.id)">
                    <template #title>
                        
                    <span class="title">
                        {{item.nm}} 
                    </span>
                    <!-- <span class="type" v-if="item.version">
                        <span class="typenum">{{item.version.substr(1,1)+item.version.substr(2,1).toUpperCase()}}</span><span class="imax">{{item.version.substr(3,10)}}</span>
                    </span> -->
                    </template>
                    <template #desc>
                    <div class="desc">
                        <div v-if="item.wish" >
                            <span class="wish">{{item.wish}}</span>人想看
                        </div>
                        <div v-if="item.sc">
                        观众评：<span class="grade">{{item.sc}}</span>
                        </div>
                        <div>主演：{{item.star}}</div>
                        <div> {{item.showInfo}}</div>
                    </div>
                    </template>
                    <template #thumb><div class="showtime">{{item.comingTitle}}</div>
                    <img :src="item.img.replace('/w.h','')" alt="" />
                    </template>
                    <template #footer>
                        <van-button type="primary" color="#faaf00" size="small" v-if="item.preShow">预售</van-button>
                        <van-button type="primary" color='#3c9fe6' size="small" v-if="!item.preShow">想看</van-button>
                    </template>
            </van-card>
        </div>
    </div>
</template>
<script>
import uri from '@/config/uri'
import Vue from 'vue';
import { Card, Tag, List,Button,Toast } from 'vant';
import Swiper from "swiper";
import "swiper/swiper-bundle.min.css";
Vue.use(List);
Vue.use(Card);
Vue.use(Tag);
Vue.use(Button)
Vue.use(Toast);

export default {
     data(){
        return {
            fmovieList:{},
            fmovieimgList:[],
            limit:10,
            fmovieList2:{},
            fmovieimgList2:[],
            ids:[],
            fmovieList3:{},
            fmovieimgList3:[],
            ids2:[]
        }
    },
    created(){
        if(localStorage.getItem('cityid')){
        let cid = localStorage.getItem('cityid')+5
        this.$http.get(uri.comingList+'?ci='+cid+'&token=&limit=100').then((req) => {
                    this.fmovieList2 = req.coming
                    this.ids = req.movieIds
                    console.log(this.ids);
                    this.fmovieList2.forEach(el=>{
                    this.fmovieimgList2.push(el.img.replace('/w.h',''))
                    }); 
                    
                    this.$http.get(uri.moreComingList+'?token=&movieIds='+`${this.ids}`).then((req)=>{
                        console.log(this.ids);
                        this.fmovieList3 = req.coming
                        console.log(this.fmovieList2);
                        console.log(this.fmovieList3);
                        Object.assign(this.fmovieList2,this.fmovieList3)
                        console.log(this.fmovieList2);
                        this.fmovieList3.forEach(el=>{
                            this.fmovieimgList3.push(el.img.replace('/w.h',''))
                            });
                        this.fmovieimgList2 = [...this.fmovieimgList2,...this.fmovieimgList3]
                        
                         
                    });
            }).then(ret=>{
                
               
            })
        this.$http.get(uri.mostExpected+'?ci='+cid+'&limit=10').then(req=>{
                     this.fmovieList = req.coming
                    this.fmovieList.forEach(el=>{
                    this.fmovieimgList.push(el.img.replace('/w.h',''))
                    });
                    this.$nextTick(() => {
                      new Swiper('.swiper-container', {
                            slidesPerView:3,
                            spaceBetween: 10,
                            observer: true, //修改swiper自己或子元素时，自动初始化swiper
						    observeParents: true, //修改swiper的父元素时，自动初始化swiper
                            }
                            );
                        });
        })
                
        }
        else {
            Toast.fail('请先选择城市！');
            this.$router.push('/city/asdsadsa')
        }
    },
    methods:{
         goDetail(id){
            this.$router.push('/film/:filmId='+id);
        }
    }
}
</script>
<style scoped>
.fmovie {
    margin-top:130px;
    margin-left: 10px;
    margin-right: 10px;
    
}
.swiper-slide img {
    width:85px;
    height:115px;
}
.ftitle {
   font-size: 14px;
    color: #333;
    margin-bottom: 12px;
}
.exwish {
    color: #faaf00;
    font-size: 11px;
    font-weight: 600;
    position: absolute;
    top: 100px;
    left:10%;
    font-size: 12px;
}
.exname {
    height: 20px;
    width:85px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 800;
    color: #222;
    margin-bottom: 3px;
}
.extime {
    font-size: 12px;
    color: #999;
}
.wantwatch {
     width:28px;
    height: 28px;
    position: absolute;
    top:0;
    left:0;
    line-height: 28px;
    background: rgba(61,63,71,.6);
    text-align: center;

}
.wantwatch img {
    width:10px;
    height: 10px;
}
.fmovielist {
    margin-top: 20px;
}
.ftop {
    margin-bottom: 40px;
}
.van-card {
    margin-bottom: 40px;
}
.showtime {
    width:100%;
    line-height: 20px;
    font-size: 14px;
    color: #333;
    position: absolute;
    top:-30px;
}
 .seegrade {
     position: absolute;
    left: 4px;
    bottom: 30px;
    color: #faaf00;
    font-size: 11px;
    font-weight: 600;
 }
 .filmname {
     position:absolute;
     bottom: 10px;
     left:10px;
     font-size: 12px;
     padding-left: 10px;
 }
.van-card__thumb img{
    width:66px;
    height: 94px;
    border-radius: 0;
}
.title {
    display: inline-block;
    font-size: 17px;
    color: #333;
    font-weight: 700;
    padding-right: 5px;
    margin-bottom: 5px;
}
.desc {
    font-size: 13px;
    color: #666;
}
.grade {
    font-weight: 700;
    color: #faaf00;
    font-size: 15px;
}
.wish {
    color: #faaf00;
    font-size: 15px;
    font-weight: 600;
}
.type {
    display: inline-block;
    width:45px;
    border:1px solid #509FC9;
    border-left: 0;
}
.typenum {
    display: inline-block;
    width:20px;
    height: 15px;
    color:white;
    text-align: center;
    background-color: #509FC9;
}
.imax {
    display: inline-block;
    text-align: center;
    width: 25px;
    height: 15px;
    color:#509FC9;
}
.van-card__footer {
    width:20%;
    position: absolute;
    top:20px;
    right:10px;
}
</style>